<template>
  <div id="app">
	<el-container>
	  <el-header>
		  <div class="title">
		  	<div class="title_logo">
		  		<div>
					<!-- 这里可以添加logo图片 -->
		  			<!-- <img class="title_img" src="../../public/static/img/logo.png"> -->
		  		</div>
		  		<div>
					<!-- 平台名字 -->
		  			<span class="title_span" style="color: white;">一些操作DEMO</span>
		  		</div>
		  	</div>
		  	<div class="title_user">
				<div class="div_user">
					<router-link to="/home"><el-button type="text">首页</el-button></router-link>
				</div>
				<div class="div_user">
					<router-link to="/imgTest"><el-button type="text">裁剪印章</el-button></router-link>
				</div>
		  		<div class="div_user">
					<router-link to="/filePdf"><el-button type="text">文件上传</el-button></router-link>
		  		</div>
		  		<div class="div_user">
					<router-link to="/pdfShow"><el-button type="text">PDF预览</el-button></router-link>
		  		</div>
		  	</div>
		  </div>
		  <!-- 流星雨 -->
		  <div class="div_container">
		  	<div class="container">
		  		<div class="line" style="--color:#ec3e27;--x:3;--z:3;--d:1;"></div>
		  		<div class="line" style="--color:#e056fd;--x:3;--z:2;--d:2;"></div>
		  		<div class="line" style="--color:blue;--x:4;--z:1;--d:3;"></div>
		  		<div class="line" style="--color:#fd79a8;--x:4;--z:0;--d:1;"></div>
		  		<div class="line" style="--color:#e056fd;--x:6;--z:-1;--d:2;"></div>
		  		<div class="line" style="--color:#0984e3;--x:6;--z:-2;--d:3;"></div>
		  		<div class="line" style="--color:#blue;--x:8;--z:-3;--d:1;"></div>
		  		<div class="line" style="--color:#0984e3;--x:10;--z:-4;--d:2;"></div>
		  		<div class="line" style="--color:#000;--x:12;--z:-5;--d:3;"></div>
		  		<div class="line" style="--color:#e056fd;--x:14;--z:-6;--d:1;"></div>
		  		<div class="line" style="--color:#0984e3;--x:16;--z:-7;--d:2;"></div>
		  		<div class="line" style="--color:#blue;--x:18;--z:-8;--d:3;"></div>
		  		<div class="line" style="--color:#e056fd;--x:20;--z:-9;--d:1;"></div>
		  	</div>
		  </div>
	  </el-header>
	  <el-main>
		 <router-view></router-view>
		 
	  </el-main>
	</el-container>
	
  </div>
</template>

<script>
	
import Home from './views/home.vue'

export default {
  name: 'app',
  components: {
    Home
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  position:fixed;
  width: 100%;
  height: 100%;
  top:0px;left:0px;
}

/* element布局 */
	.el-container{
		height: 100%;
	}
	/* 头部 */
	.el-header{
		background-color: #409EFF;
		color: white;
		height: 80px !important;
		line-height: 78px;
	}
	
	/* 登陆部分 */
	.title{
		display: flex;
		justify-content: space-between;
	}
	.title_logo{
		display: flex;
		justify-content: space-between;
		
	}
	/* logo图片 */
	.title_img{
		width:40px;
		height:40px;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	/* 平台名字 */
	.title_span{
	    margin-left: 15px;
	    font-size: 25px;
	    font-family: "KaiTi";
		color: #797979;
	}
	.title_user{
		color: #797979;
		font-size: 18px;
		margin-right: 50px;
		display: flex;
		flex-wrap: nowrap;
	}
	.title_user div{
		padding-left: 5px;
		padding-right: 5px;
	}
	/* 登陆注册按钮 */
	.div_user{
		margin-left: 10px; 
		color: white;
	}
	
	/* 登陆按钮样式 */
	.el-button--text{
		color: white;
		font-size: 16px;
	}
	.el-button--text:hover{
		text-decoration:underline;
	}
	
	/* 底部 */
	.el-footer {
	    background-color: #B3C0D1;
	    color: #333;
	    text-align: center;
	    line-height: 60px;
	  }
	
	/* 中间内容部分 */
	.el-main {
	    background-color: #F6F7F8;
	    color: #000000;
	    text-align: center;
		padding: 0px !important;
	}
	/* 缩放 */
	.el-slider__runway{
		width: 300px !important;
	}
	
	
	/* 全局滚动条 */
	::-webkit-scrollbar {
		width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
		height: 5px;
	}
	/*滚动条里面小方块*/
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		 -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);
		background: #409EFF;
	}
	/*滚动条里面轨道*/
	::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.01);
		border-radius: 10px;
		background: #FFFFFF;
	}
	
	/* 流星雨 */
	.div_container{
		width: 95vw;
		height: 60vh;
		background-color: var(--background-color);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.line {
		position: absolute;
		margin: auto;
		width: 200px;
		height: 3px;
		border-radius: 3px;
		background-color: #fff;
		background-image: linear-gradient(to right, var(--color), #ffffff50, transparent);
		animation: down 1s linear infinite both;
		animation-delay: calc(var(--d) * 0.6s);
	
	}
	.line::before,
	.line::after {
		position: absolute;
		content: "";
		width: inherit;
		height: inherit;
		background-image: inherit;
	
	}
	.line::before {
		filter: blur(5px);
	}
	.line::after {
		filter: blur(5px);
	}
	@keyframes down {
		0% {
			transform: translateY(calc(var(--z) * 60px)) 
			translateZ(calc(var(--z) * 200px)) 
			rotate(-45deg) 
			translateX(calc(var(--x) * 200px));
		}
		100% {
			transform: translateY(calc(var(--z) * 60px))
			 translateZ(calc(var(--z) * 200px)) 
			 rotate(-45deg) 
			 translateX(calc(var(--x) * -200px));
	
		}
	}
</style>
